$height1: 440px;
$height2: 232px;
$height3: 258px;
$height4: 385px;
$span: 16px;
$background2: rgb(0 165 159 / 10%);
$no: #ff0000;
.home {
  width: 100%;
  height: 100%;
  .module {
    padding: 24px;
    background: var(--el-bg-color);
    border-radius: 8px;
    .title {
      font-size: 16px;
      font-weight: 700;
      color: var(--el-text-color-primary);
      .more {
        float: right;
        font-size: 14px;
        color: var(--el-color-primary);
      }
    }
    .s-title {
      align-content: center;
      height: 22px;
      font-size: 14px;
      font-weight: 500;
      color: var(--el-text-color-primary);
      .line {
        position: relative;
        top: 3px;
        display: inline-block;
        width: 4px;
        height: 16px;
        margin-right: 8px;
        background: var(--el-color-primary);
        border-radius: 2px;
        border-end-end-radius: 2px;
      }
    }
  }
  :deep(.module1) {
    margin-bottom: $span;
    .key-btn {
      display: flex;
      align-items: center;
      .el-carousel__item {
        text-align: center;
      }
      .el-carousel__arrow {
        flex: none;
        width: 24px;
        height: 24px;
        color: var(--el-text-color1);
        cursor: pointer;
        background: transparent;
        &.el-carousel__arrow--left {
          left: 4px;
        }
        &.el-carousel__arrow--right {
          right: 4px;
        }
        &:hover {
          width: 24px;
          height: 24px;
          background: var(--el-bg-color);
          border-radius: 100%;
          box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
        }
      }
    }
    .key-group {
      width: 100%;
      height: 32px;
      margin: 30px 0;
      overflow: hidden;
      .group {
        width: 352px;
        text-align: left;
      }
      .key-item {
        .el-radio-button__inner {
          width: 80px;
          height: 32px;
          padding: 0;
          margin: 0 4px;
          font-size: 14px;
          line-height: 32px;
          color: var(--el-text-color-primary);
          white-space: normal;
          background: var(--el-btn-bg-color);
          border: none;
          border-radius: 71px;
        }
        &.is-active {
          .el-radio-button__inner {
            color: var(--el-radio-button-checked-text-color, var(--el-color-white));
            background-color: var(--el-radio-button-checked-bg-color, var(--el-color-primary));
            box-shadow: none;
          }
        }
      }
    }
    .key-content {
      height: calc(341px - 90px);
      padding: 20px;
      margin-top: 18px;
      background: var(--el-bg-color2);
      border-radius: 8px;
      .k-item {
        float: left;
        width: calc(33% - 24px);
        height: 114px;
        margin-right: 36px;
        margin-bottom: 20px;
        text-align: center;
        &:nth-child(3n) {
          margin-right: 0;
        }
        img {
          width: 40px;
          height: 40px;
        }
        .k-number {
          margin: 8px 0;
          font-size: 24px;
          font-weight: 700;
          line-height: 28.13px;
          color: var(--el-text-color);
        }
        .k-name {
          width: 100%;
          overflow: hidden;
          font-size: 14px;
          line-height: 20.27px;
          color: var(--el-text-color);
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .img-content {
        display: flex;
        height: 87px;
        padding: 22px 16px 13px;
        border-bottom: 1px solid rgb(0 0 0 / 10%);
        img {
          flex: none;
        }
        .main {
          margin-left: 20px;
          div:first-child {
            margin-bottom: 16px;
          }
        }
        .m1 {
          flex: auto;
          font-size: 32px;
          font-weight: 500;
          line-height: 37.5px;
        }
        .m2 {
          height: auto;
          font-size: 16px;
          font-weight: 500;
          line-height: 23.17px;
          color: var(--el-text-color);
        }
      }
      &.alarm {
        .m1,
        .count {
          color: rgb(240 104 105 / 100%);
        }
      }
      &.system {
        .m1,
        .count {
          color: rgb(82 122 255 / 100%);
        }
      }
      &.asset {
        .m1 {
          color: var(--el-color-primary);
        }
        .count {
          color: rgb(240 104 105 / 100%);
        }
      }
      &.bill {
        .m1 {
          color: var(--el-color-primary);
        }
        .count {
          color: var(--el-color-primary);
        }
      }
      &.capacity {
        .item {
          display: flex;
          align-items: center;
          padding: 30px 0;
          line-height: 1;
          border-bottom: 1px solid var(--el-border-color);
          &:first-child {
            padding-top: 18px;
          }
          &:last-child {
            border-bottom: none;
          }
          .a {
            flex: none;
            width: 50%;
            font-size: 14px;
            font-weight: 500;
            color: var(--el-text-color);
            text-align: left;
          }
          .b {
            flex: auto;
            color: var(--el-color-primary);
            text-align: right;
            .l-text {
              margin-right: 6px;
              font-size: 28px;
              font-weight: 500;
            }
          }
        }
      }
      .msg-content {
        margin-top: 20px;
        margin-left: 16px;
        div {
          margin-bottom: 18px;
          font-size: 14px;
          font-weight: 500;
          color: var(--el-text-color);
          .count {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 700;
          }
        }
      }
    }
  }
  .module2 {
    padding-bottom: $span;
    .entry-content {
      margin-top: 24px;
      .e-item {
        display: flex;
        align-items: center;
        float: left;
        width: calc(50% - 8px);
        height: 48px;
        margin-right: 16px;
        margin-bottom: 16px;
        line-height: 48px;
        cursor: pointer;
        background: var(--el-bg-color3);
        border-radius: 8px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        &:hover {
          background: var(--el-bg-hover-color3);
        }
        .iconfont {
          display: inline-block;
          margin-left: 16px;
          font-size: 22px;
          background: -webkit-linear-gradient(90deg, rgb(24 214 208 / 100%) 0%, rgb(120 170 250 / 100%) 100%);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .e-name {
          max-width: calc(100% - 70px);
          margin-left: 16px;
          overflow: hidden;
          font-size: 14px;
          color: var(--el-text-color-primary);
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .qLogin-content {
      margin-top: 30px;
      .l-item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        margin-bottom: 16px;
        cursor: pointer;
        background: var(--el-bg-color3);
        border: 1px solid var(--el-border-color);
        border-radius: 8px;
        .iconfont {
          display: inline-block;
          margin-left: 27px;
          font-size: 27px;
          color: var(--el-icon-color);
        }
        .l-name {
          flex: auto;
          max-width: calc(100% - 200px);
          margin-left: 21px;
          overflow: hidden;
          font-size: 16px;
          color: var(--el-text-color-primary);
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .go {
          width: 100px;
          margin-right: 20px;
          font-size: 14px;
        }
      }
    }
    .announcement-content {
      margin-top: 38px;
      .a-item {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
        .dot {
          flex: none;
          width: 6px;
          height: 6px;
          margin-right: 8px;
          background: rgb(100 102 102 / 15%);
          border-radius: 100%;
          &.no {
            background: $no;
          }
        }
        .tag {
          flex: none;
          width: 40px;
          height: 24px;
          margin-right: 8px;
          border: none;
          &.el-tag--primary {
            color: rgb(51 156 255 / 100%);
            background: rgb(51 156 255 / 10%);
          }
        }
        .a-content {
          flex: auto;
          max-width: calc(100% - 180px);
          overflow: hidden;
          font-size: 14px;
          color: var(--el-text-color2);
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
        .update-time {
          width: 125px;
          margin-left: 8px;
          overflow: hidden;
          font-size: 12px;
          color: var(--el-text-color3);
          text-align: right;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .dailyReport-content {
      margin-top: 38px;
      .r-item {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 28px;
        .dot {
          flex: none;
          width: 6px;
          height: 6px;
          margin-right: 8px;
          background: rgb(100 102 102 / 15%);
          border-radius: 100%;
          &.no {
            background: $no;
          }
        }
        .r-content {
          flex: auto;
          max-width: calc(100% - 130px);
          overflow: hidden;
          font-size: 14px;
          color: var(--el-text-color2);
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
        }
        .update-time {
          width: 125px;
          margin-left: 8px;
          overflow: hidden;
          font-size: 12px;
          color: var(--el-text-color3);
          text-align: right;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .m1-1 {
    height: $height1;
  }
  .m1-2 {
    height: $height2;
  }
  .m3-1 {
    height: $height3;
  }
  .m3-2 {
    height: $height4;
    margin-top: $span;
  }
  .m4-1 {
    margin-bottom: $span;
  }
  .m4-1-1,
  .m4-1-2 {
    height: $height3;
  }
  .m4-2 {
    height: $height4;
    .m4-2-1 {
      height: $height4 - 76px;
      padding-top: 36px;
      margin-top: 18px;
      border-top: 1px solid var(--el-border-color);
    }
  }
  .m2 {
    display: flex;
    height: $height1;
    :deep(.m2-1) {
      flex: auto;
      width: calc(100% - 183px);
      .todoTabs {
        height: 100%;
        .el-tabs__header {
          margin-top: -16px;
        }
      }
      .table-main {
        width: 100%;
        height: 400px;
        padding: 0;
        border-radius: 0;
        .el-table__inner-wrapper::before {
          background-color: transparent;
        }
        .el-table .el-table__cell.is-center {
          text-align: left;
        }
        .el-table__cell {
          padding: 11px 0;
        }
        .icon-alarm {
          color: rgb(223 71 43 / 100%);
        }
        .icon-detail {
          color: var(--el-color-primary);
        }
        .alarm-detail {
          color: var(--el-color-primary);
        }
        .el-tag {
          border: none;
        }
      }
    }
    .m2-2 {
      flex: none;
      width: 183px;
      border-left: 1px solid var(--el-border-color);
      .dateTime-item {
        position: relative;
        left: 12px;
        width: 136px;
        height: 42px;
        padding: 7.3px 0;
        margin: auto;
        margin-bottom: 8px;
        color: var(--el-text-color-primary);
        cursor: pointer;
        background: var(--el-bg-color2);
        border-radius: 8px;
        .d-content {
          padding-left: 16px;
        }
        .el-icon {
          color: var(--el-text-color1);
        }
        .d-time {
          margin-bottom: 6px;
          font-size: 12px;
        }
        .d-count {
          font-size: 12px;
          .l-span {
            margin-right: 2px;
            margin-left: 5px;
            font-size: 16px;
            font-weight: 500;
          }
        }
        &.active,
        &:hover {
          background: $background2;
          box-shadow: 1px 1px 4px rgb(0 0 0 / 10%);
          .d-content {
            border-left: 2px solid var(--el-menu-active-color);
          }
        }
      }
    }
    :deep(.el-pagination) {
      margin-right: 20px;
    }
  }
}
